<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>赛事报名</title>
</head>
<style>
    body {
        background-color: #fff;
    }

    .competitionlist {
        height: 80vh;
        width: 97vw;
        border-top: 1px dashed black;
        border-left: 1px dashed black;
    }

    #events {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        text-align: center;
    }

    .bg {
        background: url('./images/bgr.jpg');
        /* box-sizing: border-box; */
        width: 48%;
        height: 120px;
        margin-top: 50px;
        list-style-type: none;
        background-size: 100% 100px;
        background-repeat: no-repeat;
    }

    .bg a {
        margin-top: 50px;
        transform: translateY(-50%);
        display: block;
        color: #fff;
        letter-spacing: 3px;
        text-decoration: none;
    }

    .title {
        margin-top: 10px;
        margin-bottom: 10px;
        /* align-items: center; */
        display: flex;
        justify-content: space-around;
        font-weight: bold;
    }

    .t1 {
        transform: translateX(-230%);
        letter-spacing: 2px;
    }

    .t2 {
        transform: translateX(150%);
    }

    .bottom {
        display: flex;
        justify-content: space-around;
        font-weight: bold;
    }

    .flex-container {
        display: flex;
        justify-content: space-around;
    }

    .flex-item {
        width: 30px;
        height: 8px;
        background-color: black;
        margin-right: 3px;
        transform: translateY(100%);
    }

    .flex-container> :last-child {
        background-color: #A40000;
    }

    .bottom> :first-child {
        transform: translateX(-100%);

    }

    .bottom>:last-child {
        transform: translateX(-190%);
    }
</style>

<body>
    <div id="app">

        <div class="title">
            <span class="t1">【赛事报名】</span>
            <span class="t2">更多赛事报名...</span>
        </div>

        <!-- 报名列表： -->
        <div class="competitionlist">
            <ul id="events">
                <li class="bg"><a href="#event1">2024年第十六届香港国际武术比赛<br>报名系统</a></li>
                <li class="bg"><a href="#event2">2024年集美区第七届中小学报名系统生武术（套路）竞标赛<br>报名系统</a></li>
                <li class="bg"><a href="#event3">第十四届华夏少林武术大赛<br>报名系统</a></li>
                <li class="bg"><a href="#event4">2023年海峡两岸体育嘉年华<br>第三届客家武术大赛报名系统</a></li>
                <li class="bg"><a href="#event5">2024年灯都古镇第七届传统武术精英大赛<br>报名系统</a></li>
                <li class="bg"><a href="../login/login.html">第二届潇湘武林大会报名系统<br>报名系统</a></li>
            </ul>
        </div>

        <div class="bottom">
            <div id="bt">
                <div class="flex-container">【新闻与国际交流】
                    <div class="flex-item"></div>
                    <div class="flex-item"></div>
                    <div class="flex-item"></div>
                </div>
            </div>
            <div id="bt">
                <div class="flex-container">【武术名家】
                    <div class="flex-item"></div>
                    <div class="flex-item"></div>
                    <div class="flex-item"></div>
                </div>
            </div>
        </div>





    </div>
</body>

</html>